<template>
  <view class="content">
    <view class="toPage" :style="headBoxStyle" @click="toPage">
      <uni-icons type="left" size="30" color="#fff"></uni-icons>
    </view>
    <!--    <view class="message">最后更新于 2023-05-06 22:00</view>-->
    <view class="role" @click="toRole">热度计算规则</view>
    <view class="box">
      <view class="tap">
        <view class="tap-item" :class="tapIndex===0?'tap-item-active':''" @click="setTapIndex(0)">个人热度排行榜</view>
        <view class="tap-item" :class="tapIndex===1?'tap-item-active':''" @click="setTapIndex(1)">门店热度排行榜</view>
      </view>
      <view class="top-title">
        <view class="title-box">
          <image :src="image_host+'icon_paihang.png'"></image>
          <text>{{ PostForm.weektype === 1 ? '当月热度排行' : '当周热度排行' }}</text>
        </view>
        <view class="toYRank" @click="setWeektype(PostForm.weektype===0?1:0)">
          {{ PostForm.weektype === 0 ? '切换当月热度排行' : '切换当周热度排行' }}
        </view>
      </view>
      <view class="th">
        <view class="th-item">排名</view>
        <view class="th-item">{{ tapIndex === 0 ? '姓名' : '门店' }}</view>
        <view class="th-item">说说热度</view>
      </view>
      <view class="user-box">
        <view class="td-item">
          {{ userInfo.rank >= 1 ? userInfo.rank : '未上榜' }}
        </view>
        <view class="td-item" :class="tapIndex===1?'td-item-center':''">
          <image class="avatar" v-if="tapIndex===0" :src="userInfo.avatar"></image>
          {{ userInfo.nickName }}
          <view class="shopName" style="color: #FF4A52;" v-if="tapIndex===1">(我的门店)</view>
        </view>
        <view class="td-item">{{ userInfo.num }}</view>
        <view class="l-sjiaos"></view>
        <view class="r-sjiaos"></view>
      </view>
      <scroll-view scroll-y @scrolltoupper="reachBottom=false" @scrolltolower="end"
                   :scroll-top="scrollTop" lower-threshold="100"
                   class="list">
        <view class="item" v-for="(item,index) in list" :key="index">
          <view class="td-item">
            <image v-if="index<3"
                   :src="image_host+'icon_top'+(index)+'.png'"></image>
            <text v-else>{{ index + 1 }}</text>
          </view>
          <view class="td-item" :class="tapIndex===1?'td-item-center':''">
            <image class="avatar" v-if="tapIndex===0" :src="item.avatar"></image>
            {{ item.nickName }}
            <view class="shopName" v-if="tapIndex===1">({{ item.market || '--' }})</view>
          </view>
          <view class="td-item">
            <image v-if="index<10" class="ph-huo" :src="image_host+'icon_ph_huo.png'"></image>
            {{ item.num }}
          </view>
        </view>
        <view style="width: 100%;height: 200rpx;"></view>
      </scroll-view>
    </view>
    <view class="button" @click="setHaibao">
      <button>
        <image v-show="tapIndex===0" :src="image_host+'tab_mingci.png'"></image>
        <image v-show="tapIndex===1" :src="image_host+'tab_mingci@2x.png'"></image>
      </button>
    </view>
    <view class="haibao" v-if="haibao" @click="hideHaibao">
      <view class="painter">
        <painter
            v-if="!qcode"
            @imgOK="onImgOk"
            @imgErr="onImgErr"
            widthPixels="750"
            :customStyle="customStyle"
            :palette="template"
        />
      </view>

      <image v-if="qcode" :src="qcode"></image>
      <!--      <view class="bottom-box">-->
      <!--        <view class="set-list">-->
      <!--          <view class="set-item" @click="download">-->
      <!--            <image :src="image_host+'icon_baocuntu@2x.png'"></image>-->
      <!--            <view>保存照片</view>-->
      <!--          </view>-->
      <!--          <view class="set-item">-->
      <!--            <image :src="image_host+'icon_pengyouquan@2x.png'"></image>-->
      <!--            <view>朋友圈</view>-->
      <!--          </view>-->
      <!--          <view class="set-item">-->
      <!--            <image :src="image_host+'icon_weixin@2x.png'"></image>-->
      <!--            <view>微信</view>-->
      <!--          </view>-->
      <!--        </view>-->
      <!--        <view class="q" @click="haibao=false">取消</view>-->
      <!--      </view>-->
    </view>
  </view>
</template>

<script>
import {templateJson, templateJson2} from "./templateJson"

export default {
  data() {
    return {
      image_host: this.image_host + 'quanzi/',
      headBoxStyle: "padding-top: " + uni.getStorageSync('menuInfo').menuTop,
      tapIndex: 0,
      PostForm: {
        page: 1,
        pageSize: 10,
        type: 0,
        weektype: 0
      },
      list: [],
      userInfo: {},
      customStyle: "opacity: 0;z-index:0;",
      template: {},
      qcode: "",
      haibao: false,
      reachBottom: false,
      scrollTop: '',
      isEnd: false
    };
  },
  onShow() {
    this.getRankList()
    this.getRankUser()
    this.haibao = false
    this.qcode = ''
  },
  onLoad(e) {
    console.log(e)
  },
  methods: {
    setTapIndex(index) {
      this.tapIndex = index
      this.PostForm.type = index
      this.scrollTop = ''
      this.PostForm.page = 1
      this.isEnd = false
      this.$nextTick(() => {
        this.scrollTop = 0
      })
      this.getRankList()
      this.getRankUser()
    },
    setHaibao() {
      this.haibao = true;
      uni.showLoading()
    },
    hideHaibao() {
      this.haibao = false;
      this.qcode = ''
    },
    setWeektype(index) {
      this.PostForm.weektype = index
      this.scrollTop = ''
      this.isEnd = false
      this.$nextTick(() => {
        this.scrollTop = 0
      })
      this.PostForm.page = 1
      this.getRankList()
      this.getRankUser()
    },
    async getRankList() {
      let data = this.PostForm;
      let res = await this.$javaCircle.doRequest("post", 'circle/customer/hot/msgNoticeList', data, 'json');
      this.list = (data.page === 1 ? [] : this.list).concat(res.data.data)
      if (res.data.data.length === 0) {
        this.isEnd = true
      }
    },
    async getRankUser() {
      let data = this.PostForm;
      let res = await this.$javaCircle.doRequest("post", 'circle/customer/hot/myHotBank', data, 'json');
      this.userInfo = res.data.data
      // 海报json

      if (this.tapIndex === 0) {
        let json = JSON.parse(JSON.stringify(templateJson));
        json.views[0].text = this.userInfo.nickName
        json.views[3].url = this.userInfo.avatar
        json.views[4].text = this.userInfo.nickName
        json.views[8].url = this.userInfo.qrcode
        json.views[9].text = `共发表${this.userInfo.sayNum}条说说，获得${this.userInfo.praiseNum}个点赞，${this.userInfo.commentNum}条评论`
        json.views[10].text = this.PostForm.weektype === 0 ? '本周热度排名：' : '本月热度排名：'
        json.views[12].text = (this.userInfo.num ? this.userInfo.num : 0) + ''
        json.views[13].text = (this.userInfo.rank ? this.userInfo.rank : '未上榜') + ''
        json.views[14].url = json.views[14].url + ((this.userInfo.hotLevel || 0) === 0 ? '.png' : 'v' + this.userInfo.hotLevel + '.png')
        console.log(json, 'json')
        this.template = json
      } else if (this.tapIndex === 1) {
        let json = JSON.parse(JSON.stringify(templateJson2));
        json.views[0].text = this.userInfo.market + '-' + this.userInfo.nickName
        // json.views[3].url = this.userInfo.avatar
        json.views[4].text = this.userInfo.market + '-' + this.userInfo.nickName
        json.views[8].url = this.userInfo.qrcode
        json.views[9].text = `共有${this.userInfo.peopleNum}位顾客发表了${this.userInfo.sayNum}条说说，其中我为门店助力了${this.userInfo.praiseNum}个热度值`
        json.views[10].text = this.PostForm.weektype === 0 ? '本周热度排名：' : '本月热度排名：'
        json.views[12].text = (this.userInfo.num ? this.userInfo.num : 0) + ''
        json.views[13].text = (this.userInfo.rank ? this.userInfo.rank : '未上榜') + ''
        console.log(json, 'json')
        this.template = json
      }

    },
    toPage() {
      uni.navigateBack()
    },
    toRole() {
      uni.navigateTo({
        url: '/pages/circle/role?type=2'
      })
    },
    end() {
      if (this.isEnd) {
        return
      }
      this.PostForm.page++
      this.getRankList()
    },
    onImgOk(e) {
      uni.hideLoading()
      this.qcode = e.detail.path
      wx.showShareImageMenu({
        path: this.qcode,
        complete: function (res) {
          this.haibao = false
        },
        success: function (res) {
          console.log(res)
          this.haibao = false
        },
        fail: function (res) {
          console.log(res)
          this.haibao = false
        }
      })
    },
    onImgErr(e) {
      uni.hideLoading()
      console.log(e)
    },
    download() {
      let _this = this
      wx.saveImageToPhotosAlbum({
        filePath: _this.qcode, // 图片路径
        success(res) {
          wx.showToast({
            title: '图片保存成功',
            icon: 'success',
            duration: 2000
          });
        },
        fail(err) {
          console.log(err)
          wx.showToast({
            title: '图片保存失败',
            icon: 'none',
            duration: 2000
          });
        }
      });
    }
  },
  // 自定义分享
  onShareAppMessage() {
    return {
      title: '圈子',
      path: '/pages/circle/index'
    };
  },
  onReachBottom: function () {
    this.reachBottom = true
  }
}
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #FFDAAD;
}

.content {
  width: 100%;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/quanzi/bg_redu2.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: auto;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding-top: 510upx;
  position: relative;

  .toPage {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }

  .message {
    position: absolute;
    background: rgba(173, 0, 0, 0.3);
    border-radius: 4upx;
    top: 312upx;
    left: 40upx;
    font-size: 40upx;
    color: #fff;
    font-weight: 500;
    box-sizing: border-box;
    padding: 4upx 15upx;
  }

  .role {
    position: absolute;
    top: 337upx;
    left: 40upx;
    font-size: 37upx;
    color: #960F00;
    font-weight: 500;
    text-decoration: underline;
  }

  .box {
    width: 702upx;
    height: 1019upx;
    border-radius: 28upx;
    border: 12upx solid #FF3C45;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;

    .tap {
      height: 88upx;
      position: absolute;
      top: -98upx;
      width: 100%;
      box-sizing: border-box;
      padding: 0 36upx;
      display: flex;
      justify-content: center;
      align-items: flex-end;

      .tap-item {
        width: 50%;
        height: 78upx;
        line-height: 78upx;
        text-align: center;
        font-size: 38upx;
        color: #960F00;
        font-weight: 600;
        background: #FCABAB;
        border-radius: 28upx 28upx 0 0;
        transition: all .3s linear;
      }

      .tap-item-active {
        width: 55%;
        height: 88upx;
        line-height: 88upx;
        color: #fff;
        font-size: 42upx;
        background: linear-gradient(180deg, #FF3C45 0%, #FF6570 10%, #FF3F48 30%, #FF3C45 100%);
      }
    }

    .top-title {
      width: 100%;
      height: 110upx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0 24upx;

      .title-box {
        display: flex;
        align-items: center;

        image {
          width: 44upx;
          height: 41upx;
          margin-right: 4upx;
        }

        text {
          font-size: 44upx;
          color: #FF3C45;
          font-weight: 500;
        }
      }

      .toYRank {
        font-size: 32upx;
        color: #A82A1E;
        text-decoration: underline;
      }
    }

    .th {
      width: 100%;
      display: flex;
      justify-content: space-between;
      height: 92upx;

      .th-item {
        height: 92upx;
        border-radius: 8upx 8upx 0 0;
        background-color: #FFF2F5;
        font-size: 34upx;
        color: #999999;
        line-height: 92upx;
        text-align: center;
      }

      .th-item:nth-child(1) {
        flex: .25;
      }

      .th-item:nth-child(2) {
        flex: .4;
      }

      .th-item:nth-child(3) {
        flex: .34;
      }
    }

    .user-box {
      width: 724upx;
      height: 106upx;
      background-color: #FBECAC;
      position: relative;
      left: 50%;
      transform: translate(-50%, 0);
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0 30upx;

      .l-sjiaos {
        width: 0 !important;
        height: 0 !important;
        border-top: 16rpx solid #D2E0F5;
        border-left: 23rpx solid transparent;
        position: absolute;
        bottom: -15rpx;
        left: 0;
      }

      .r-sjiaos {
        width: 0 !important;
        height: 0 !important;
        border-top: 16rpx solid #D2E0F5;
        border-right: 23rpx solid transparent;
        position: absolute;
        bottom: -15rpx;
        right: 0;
      }
    }

    .list {
      flex: 1;
      overflow: auto;
      padding: 0 24upx;
      box-sizing: border-box;

      .item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // height: 110upx;
        box-sizing: border-box;
        border-bottom: 1upx solid #E2E2E2;
        padding: 22upx 0;


      }
    }

    .td-item {
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 64upx;
        height: 76upx;
      }

      .avatar {
        width: 72upx;
        height: 72upx;
        margin-right: 12upx;
        border-radius: 50%;
      }
    }

    .td-item:nth-child(1) {
      flex: .25;
    }

    .td-item:nth-child(2) {
      flex: .4;
      justify-content: start;
      font-size: 38upx;
      line-height: 40upx;
    }

    .td-item:nth-child(3) {
      flex: .34;
    }

  }
}

.button {
  width: 516upx;
  height: 146upx;
  position: fixed;
  bottom: 60upx;
  left: 50%;
  transform: translate(-50%, 0);

  image {
    width: 100%;
    height: 100%;
  }
}

button::after {
  border: none;
}

button {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0px;
  padding-right: 0px;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  color: #000000;
  width: 100%;
  height: 100%;
}

.haibao {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .4);
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  image {
    width: 570upx;
    height: 920upx;
    border-radius: 20upx;
  }
}

.bottom-box {
  width: 750upx;
  height: 420upx;
  background: #FFFFFF;
  border-radius: 30upx 30upx 0px 0px;
  position: absolute;
  bottom: 0;
  left: 0;

  .set-list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 51upx;

    .set-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 30%;

      image {
        width: 106upx;
        height: 106upx;
      }

      view {
        font-size: 38upx;
        color: #666666;
      }
    }

  }

  .q {
    width: 690upx;
    height: 98upx;
    margin: 0 auto;
    margin-top: 30upx;
    line-height: 98upx;
    text-align: center;
    border-top: 2upx solid #D8D8D8;

  }
}

.painter {
  position: fixed;
  bottom: -10000px;
  opacity: 0;
}

.td-item-center {
  display: flex;
  flex-direction: column;
  justify-content: center !important;
  align-items: center !important;
  font-size: 40upx !important;
}

.shopName {
  font-size: 32upx;
  color: #666666;
}

.ph-huo {
  width: 24upx !important;
  height: 30upx !important;
  margin-right: 9upx;

}
</style>
